<template>
<div class="container">
  <div class="title">{{title}}</div>
  <div class="desclist">
    <span class="desc">{{desc}}</span>
    <ul>
        <li v-for="item in listMes" :key="item">{{item}}</li>
    </ul>
  </div>
  <div>
      <movie-desc :introduce="introduce" :src="descImg"></movie-desc>
  </div>
  <div class="resource">
      <resource-list :videoResource="videoResource" :way="way"></resource-list>
  </div>
  <div class="recommend">
      <div class="title">{{title}}相关剧情片</div>
      <div class="list" >
        <v-list :isDetial="true" :isHome="false" @refesh="refesh"  :Data="list" ></v-list>
      </div>
  </div>
  <div class="loading" v-if="isLoading">
    <van-loading size="50px" type="spinner" />
    </div>
</div>
</template>

<script>
import axios from 'axios'
import ResourceList from '../components/ResourceList.vue';
import { reactive, toRefs } from '@vue/reactivity';
import VList from '../components/List.vue' 
import MovieDesc from '../components/MovieDesc.vue' 
import { onMounted } from '@vue/runtime-core';
import { useRouter } from 'vue-router'
export default {
    components:{
        "resource-list":ResourceList,
        'v-list':VList,
        "movie-desc":MovieDesc
    },
    setup(){
        const router = useRouter()
        const state = reactive({
            list:[
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
                {
                src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                name:'极道宗师第二季',
                desc:'更新至第四集'
                },
            ],
            introduce:[],
            descImg:'',
            title:'',
            desc:'',
            isShow:true,
            listMes:'',
            videoResource:{},
            way:[],
            isLoading:true
    })
    onMounted(()=>{
        getData()
    })
    const getData = () =>{
        state.isLoading = true
        let href = router.currentRoute.value.params.id
        console.log(router.currentRoute.value.params.id)
        axios.get(`/api${href}`).then((res) => {
            state.introduce = res.data.introduce 
            state.descImg = res.data.descImg
            state.title = res.data.title
            state.list = res.data.list
            state.desc = res.data.desc
            state.listMes = res.data.listMes
            state.way = res.data.way
            state.videoResource = res.data.videoResource
            state.isLoading = false
            console.log(res.data)
        })
    }
    const refesh = ()=>{
        getData()
    }
    const look = ()=>{
        state.isShow = !state.isShow
    }
    return{
        ...toRefs(state),
        look,
        refesh
    }
    }
}
</script>

<style lang="less" scoped>
.container{
    .title{
        margin-left: 20px;
        font-size: 22px;
        line-height: 38px;
    }
    color: #fff;
    .desclist{
        margin-left: 20px;
        padding-top: 4px;
        display: flex;
        font-size: 12px;
        line-height: 12px;
        .desc{
            color: #FF3D00;
            font-weight: 700
        }
        ul{
            display: flex;
            li{
                margin-left: 6px;
                padding-left: 6px;
                border-left: 1px solid #666;
            }
        }
    }
    .resource{
        position: relative;
        margin: 20px;
    }
    .recommend{
        .title{
            font-size: 18px;
            color: #fff;
            font-weight: 700;
            margin-left: 20px;
        }
        .list{
            margin-top: 40px;
        }
    }
    .loading{
    position: fixed;
    top: calc(50vh - 25px);
    left: calc(50vw - 25px);
}
}
</style>